<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <school></school>
        <School></School>
        <!--<School/>--> <!--也可以用自关闭标签，但是在非脚手架环境写多个自关闭标签会有bug不显示-->
        <hr>
        <my-student></my-student>
        <!-- <MyStudent></MyStudent> --><!--大驼峰只能在脚手架环境中使用-->

        <school2></school2>
    </div>

    <script>
        Vue.config.productionTip = false

        let sch = Vue.extend({ 
            template: `
                <div>
                    <h2>学校名称：{{schoolName}}</h2>
                    <h2>学校地址：{{address}}</h2>
                </div>
            `,
            data() {
              return {
                schoolName: 'shanggg',
                address: 'bj',
              }
            }
        })

        //创建组件简写形式，可不写Vue.extend()，注册组件时自动调用Vue.extend()
        let sch2 = { 
            template: `
                <div>
                    <h2>学校名称2：{{schoolName}}</h2>
                    <h2>学校地址2：{{address}}</h2>
                </div>
            `,
            data() {
              return {
                schoolName: 'shanggg',
                address: 'bj',
              }
            }
        }

        let stu = Vue.extend({ 
            name: 'hahaStudent', //指定组件在开发者工具的名称，不影响实际组件名称
            template: `
                <div>
                    <h2>学生名称：{{studentName}}</h2>
                    <h2>学生地址：{{age}}</h2>
                </div>
            `,
            data() {
              return {
                studentName: '张三',
                age: 18,
              }
            }
        })
        
        let vm = new Vue({
            el: "#root",
            components: {
                //定义组件名的几个注意点
                school: sch, //写法1：单个单词纯小写
                School: sch, //写法2：单个单词首字母大写
                'my-student': stu ,//写法3：多个单词，用横杠连接，加引号
                MyStudent: stu, //写法4：多个单词，大驼峰，只能在脚手架环境使用，这里会报错
                //H2: stu, //反例：不能使用html原有标签，无论大小写
                school2: sch2, //测试创建组件简写
            }
        })

    </script>
</body>
</html>